import { forwardRef, useImperativeHandle, useRef, ForwardedRef } from 'react';
import { useEvents } from '@inbiz/utils';
import { connect, mapProps } from '@formily/react';
import { IConfigItemEngineProps } from '../web/index';
import EventContext from '../common/EventContext';
import SearchResultMain from './components/main';
import BizHeader from '@inbiz/basic/BizHeader';
import BizBody from '@inbiz/basic/BizBody';
import useConfigApi from '../common/useConfigApi';
import api from '../common/api';
import type { ISearchResultMainRef } from '../common/useConfigs';
import { formatPorps } from '../common/formatPorps';
import './style.less';

function SearchResultEngineWap(
  props: IConfigItemEngineProps,
  ref: ForwardedRef<ISearchResultMainRef>,
) {
  const [configEvents] = useEvents(props.callBackEvents);
  const configEventsApi = useConfigApi(configEvents);
  const refMain = useRef<ISearchResultMainRef>(null);
  useImperativeHandle(ref, () => api(configEvents, refMain), []);

  return (
    <EventContext.Provider
      value={{ configEvents, configEventsApi, emit: props.emit || (() => { }), inbiz: props.inbiz }}
    >
      <div className="searchResultEngineWap" data-controlid={props.controlId} style={{ height: props.boxHeight }}>
        <BizHeader {...props} />
        <BizBody {...props} style={{ maxHeight: props?.style?.height, ...(props?.style || {}) }}>
          <SearchResultMain configs={props.indexIibraryConfig} engineProps={props} ref={refMain} />
        </BizBody>
      </div>
    </EventContext.Provider>
  );
}

export default connect(forwardRef(SearchResultEngineWap), mapProps({}, formatPorps));
